<template>
	<view v-if="Order!=null">
		
		<view class="body" :style="Order.Order.Status == 2 ? `background-image: url(${imgurl}zt_bg5.png)` : `background-image: url(${imgurl}zt_bg6.png)`">
			<view class="b-content">
				<view class="line-bg"></view>
				<view class="b-content-bd" style="position: relative;z-index: 9;">
					<!-- 商品状态成功售出商品-->
					<view>
						<view class="uni-title text-lg" style="padding-top: 0px;">{{  Order.Order.Status == 2 ? '我的奖励' : '审核通过将获得以下奖励' }}</view>
						<view class="margin-bottom-lg">
							<view class="uni-media-list align-center" style="padding: 35upx 0px;">
								<view class="uni-media-list-logo" style="height: 100upx;"><image :src="imgurl + 'zt_6.png'" class="img100"></image></view>
								<view class="uni-media-list-body margin-left">
									<view class="uni-media-list-text-top margin-bottom-xs text-df">
										<text class="ff text-xxl">{{ Order.Order.GivePoints }}</text>
										积分
									</view>
									<view class="uni-media-list-text-bottom"><text class="text-muted text-sm">可用于积分商城购物</text></view>
									<view class="uni-media-list-foot">
										<navigator url="/pages/my/jifen"
											class="cu-btn sm round text-white"
											style="background-color: #e54d42;padding:0px 30upx;"
											v-if="Order.Order.Status == 2 && Order.Order.GivePoints > 0"
										>
											查看
										</navigator>
									</view>
								</view>
							</view>

							<view class="uni-media-list align-center" style="padding: 35upx 0px;">
								<view class="uni-media-list-logo" style="height: 100upx;"><image :src="imgurl + 'zt_13.png'" class="img100"></image></view>
								<view class="uni-media-list-body margin-left">
									<view class="uni-media-list-text-top margin-bottom-xs text-df">
										<text class="ff text-xxl">{{ Order.Order.GiveRedpack }}</text>
										元
									</view>
									<view class="uni-media-list-text-bottom"><text class="text-muted text-sm">{{  Order.Order.Status == 2 ? '已发放到微信钱包' : '审核通过后发放到微信钱包' }}</text></view>
								</view>
							
							</view>

							<view class="uni-media-list align-center" style="padding: 35upx 0px;">
								<view class="uni-media-list-logo" style="height: 100upx;"><image :src="imgurl + 'zt_8.png'" class="img100"></image></view>
								<view class="uni-media-list-body margin-left">
									<view class="uni-media-list-text-top margin-bottom-xs text-df">
										<text class="ff text-xxl">{{ Order.Order.GiveBalance }}</text>
										元
									</view>
									<view class="uni-media-list-text-bottom"><text class="text-muted text-sm">{{  Order.Order.Status == 2 ? '已发放到零钱钱包' : '审核通过后发放到零钱钱包' }}</text></view>
								</view>
								<view class="uni-media-list-foot">
									<navigator url="/pages/my/lingqian"
										class="cu-btn sm round text-white"
										style="background-color: #e54d42;padding:0px 30upx;"
										v-if="Order.Order.Status == 2 && Order.Order.GiveBalance > 0"
									>
										查看
									</navigator>
								</view>
							</view>

							<view class="uni-media-list align-center" style="padding: 35upx 0px;display: none;">
								<view class="uni-media-list-logo" style="height: 100upx;"><image :src="imgurl + 'zt_9.png'" class="img100"></image></view>
								<view class="uni-media-list-body margin-left">
									<view class="uni-media-list-text-top margin-bottom-xs text-df"><text class="text-xl">优惠券</text></view>
									<view class="uni-media-list-text-bottom"><text class="text-muted text-sm">前往个人中心查看</text></view>
								</view>
								<view class="uni-media-list-foot">
									<button
										class="cu-btn sm round text-white"
										style="background-color: #e54d42;padding:0px 30upx;"
										v-if="Order.Order.Status == 2 "
									>
										查看
									</button>
								</view>
							</view>
						</view>
					</view>
					<view class="line-dashed"></view>
					<view class="uni-title text-lg" style="padding-top: 0px;">商品信息</view>
					<view class="uni-media-list no-before-none" style="padding:0px;" v-for="(item, index) in Order.Detail" :key="index">
						<view class="uni-media-list-logo" style="width: 125upx;"><image :src="ImgDomain + item.ProductImg" mode="" class="cu-avatar xl radius"></image></view>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top text-white">
								<view class="flex">
									<text class="text-df text-black text-bold uni-ellipsis margin-right-sm" style="width: 420rpx;">{{ item.ProductName }}</text>
								</view>
								<view class="text-muted text-sm">规格:{{ item.Spec }}</view>
							</view>
							<view class="uni-media-list-text-bottom ff text-black margin-top-sm">
								<text class="text-sm">￥</text>
								<text class="text-lg">{{ item.Price }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-btns block text-bold" style="padding-top: 0;">
			<!-- <navigator url="/pages/home/gift/index" class="uni-btn-main radio uni-btn text-lg">继续扫码</navigator> -->
			<navigator url="/pages/my/my" open-type="redirect" class="uni-btn-white radio uni-btn text-lg">前往个人中心</navigator>
		</view>
	</view>
</template>

<script>
import base from 'utils/base.js';
import tools from 'utils/tools.js';
let _self;
export default {
	data() {
		return {
			/*
			 * scresult1:获得奖励或获得奖励-随机
			 * scresult2:审核获得奖励
			 */
			ImgDomain: '',
			orderid: 0,
			imgurl: this.$imgurl,
			pimgurl: this.$pimgurl,
			Order: null,
			warming:false,
			shopopenid:""
		};
	},
	onLoad(options) {
		_self = this;
		_self.orderid = options.orderid;
		_self.shopopenid = options.shopopenid;
	},
	computed: {},
	methods: {
		ScanBindOrder() {
			let currentPage = this;
			let params = {
				type: 'POST',
				url: '/api/FaceToFace/ScanBindOrder',
				data: { OrderID: currentPage.orderid },
				sCallback: function(response) {
					if (response.IsSuccess) {
						currentPage.Order = response.Data;
						let globalData = getApp().globalData;
						
					}
				}
			};
			if (currentPage.orderid > 0) base.request(params);
		},
		FollowCheck: function() {
			let currentPage = this;
			let params = {
				type: 'GET',
				url: '/api/UserInfo/GetWmUserInfoByUserId',
				data: {},
				sCallback: function(response) {
					if (response.IsSuccess) {
						let wmsuser = response.Data;
						if (wmsuser == null || wmsuser.isFollow == 0) {
							uni.redirectTo({
								url: '/pages/my/follow'
							});
						} else {
							currentPage.ScanBindOrder();
						}
					}
				}
			};
			base.request(params);
		}
	},
	mounted() {
		let current = this;
		let globalData = getApp().globalData;
		
		current.ImgDomain = globalData.ImgDomain;
		if(_self.shopopenid &&  _self.shopopenid==globalData.UserInfo.openid)
		{
			tools.showToast('不能扫码自己生成的订单');
			return;
		}
		let time = 0;
		let si = setInterval(function() {
			time = time + 1;
			if (globalData.ticket) {
				current.FollowCheck();

				clearInterval(si);
			}
			if (time > 40) clearInterval(si);
		}, 200);
	}
};
</script>

<style lang="less" scoped>
.body {
	padding-top: 260rpx !important;
}
.uni-media-list {
	position: relative;
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 648upx;
		border-top: 1px solid #eeeeee;
	}
}
.uni-media-list-logo {
	width: auto;
}
.img100 {
	width: 100upx;
	height: 100upx;
}
.img-box {
	display: flex;
	flex-flow: column;
	align-items: center;
	margin-bottom: 70upx;
	margin-top: 30upx;
	image {
		width: 350upx;
		height: 310upx;
		margin-bottom: 40upx;
	}
}
.line-dashed {
	width: 596upx;
	border: 3upx dashed #ccc;
	margin-bottom: 40upx;
	position: relative;
	&:before {
		content: '';
		position: absolute;
		right: -66upx;
		top: 50%;
		margin-top: -15upx;
		width: 30upx;
		height: 30upx;
		background-color: #f8f8f8;
		border-radius: 50%;
	}
	&:after {
		content: '';
		position: absolute;
		left: -60upx;
		top: 50%;
		margin-top: -15upx;
		width: 30upx;
		height: 30upx;
		background-color: #f8f8f8;
		border-radius: 50%;
	}
}
.body {
	background-size: 100%;
	background-repeat: no-repeat;
	padding: 30upx;
	padding-top: 10px;
	.b-top {
		width: 100%;

		box-shadow: 0px 10upx 19upx 1px rgba(92, 116, 171, 0.25);
		border-radius: 10upx;
		margin-bottom: 150upx;
		&:before {
			display: none;
		}
		.cu-avatar-group {
			padding-left: 0px;
			width: 100upx;
		}
		.uni-media-list-text-bottom {
			font-size: 24upx;
			color: #ffffff;
			opacity: 0.5;
			margin-top: 10upx;
		}
		.uni-media-list-foot {
			// width: 76upx;
			// height: 40upx;
			// background-color: #ffffff;
			height: 44upx;
			border-radius: 22upx;
			border: solid 1px #1652de;
			font-size: 22upx;
			color: #175cde;
			line-height: 40upx;
			text-align: center;
			color: #fff;
			display: flex;
			align-items: center;
			border: solid 1px #ffffff;
			padding: 0px;
			padding: 0px 15upx;
			image {
				width: 30upx;
				height: 30upx;
				margin-right: 5upx;
			}
		}
	}
	.b-content {
		position: relative;
		.line-bg {
			position: absolute;
			top: -8upx;
			z-index: -0;
			left: -10upx;
			width: 710upx;
			height: 17upx;
			background-color: #0f46c5;
			border-radius: 9upx;
		}
		.b-content-bd {
			padding: 45upx;
			background-color: #fff;
			position: relative;
			// box-shadow: 0px 0px 10px rgba(0,0,0,.2);
			&:before {
				content: '';
				height: 10upx;
				position: absolute;
				left: 0px;
				top: -10upx;
				width: 100%;
				box-shadow: 0px 5px 10px #0f46c5;
			}
		}
		.cu-avatar-group {
			padding-left: 0px;
			width: 120upx;
		}
	}
	.padding-xs_s {
		.cu-tag::after {
			border-radius: 4px;
		}
		.line-orange::after {
			background-color: #f37b1d0f;
		}
		.line-cyan::after {
			background: #1cbbb414;
		}
		.line-yellow::after {
			background-color: #fbbd0814;
		}
		.line-blue::after {
			background-color: #0081ff17;
		}
	}
	.cu-timeline > .cu-item::after {
		left: 16upx;
		width: 0px;
		border-left: 1px dashed #ddd;
		background-color: transparent;
	}
	.cu-timeline {
		.cu-item {
			padding-top: 0px;
		}
		.content {
			background-color: transparent;
			padding: 0;
		}
	}

	.cu-timeline > .cu-item::before {
		left: 0px;
		font-size: 24upx;
		width: 32upx;
		height: 32upx;
		line-height: 32upx;
		top: 0px;
	}
	.cu-timeline > .cu-item {
		padding-left: 45upx;
		padding-right: 0px;
	}
}
</style>
